<template>
  <div class="usercard">
    <div class="login-pic"></div>
    <input placeholder="邮箱/用户名" v-model="username" required />
    <input type="password" placeholder="密码" v-model="passwd" required />
    <el-button
      style="margin-top: 10px"
      color="#ff7d00"
      @click="login(username, passwd)"
      ><span style="color: white">确认</span></el-button
    >
    <div class="gosignup" id="gosignup" @click="changesignup">
      没有账号？立即注册
    </div>
    <div class="gosignup" id="gosignup" @click="findPassword">
      忘记密码？立即找回
    </div>
  </div>
</template>

<script setup lang="ts">
import { userinfo } from '@/stores/counter';
import uselogin from '@/api/getLogin';
import { ref } from 'vue';

const user = userinfo();
const username = ref();
const passwd = ref();
const { login } = uselogin();

function changesignup() {
  user.usercardPage = 1;
}

function findPassword() {
  user.usercardPage = 2;
}
</script>

<style scoped>
.usercard {
  width: 460px;
  height: fit-content;
  background-color: white;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  border-radius: 10px;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.login-pic {
  background-image: url(/assets/imgs/login.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 70px;
  width: 160px;
  margin: 50px 0 20px;
}

.usercard > input {
  display: flex;
  width: calc(70%);
  margin: 10px;
  padding: 5px 10px;
  height: 40px;
  border: 1px #bfbdbe solid;
  border-radius: 5px;
  font-size: 18px;
}

.usercard > input::placeholder {
  color: #bfbdbe;
}

.usercard > input:focus {
  outline: none;
  /* 可选，去除选中时的默认外边框 */
}

.gosignup {
  color: #c6c0c0;
  margin: 10px 0 10px;
  text-decoration: underline;
  cursor: pointer;
}
</style>
